<!-- 属性管理 -->
<template>
  <div class="trait">
    <!-- 选项分类卡片下拉菜单 -->
    <el-card shadow="always">
      <SelectTrait />
    </el-card>
    <!-- 添加分类卡片区域 -->
    <el-card class="addTraitBox" shadow="always">
      <el-button
        type="primary"
        @click="addTrait"
        :disabled="!userTraitState.updateTitTrait.categoryId"
      >
        +添加平台属性
      </el-button>
      <el-table
        :data="userTraitState.ratitRespondList"
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="70px"
          align="center"
        />
        <el-table-column prop="attrName" label="属性名称" />
        <el-table-column prop="name" label="属性值名称">
          <template #default="scope">
            <el-tag
              type="success"
              disable-transitions
              v-for="item in scope.row.attrValueList"
              :key="item.id"
            >
              {{ item.valueName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="属性操作" align="center">
          <template #default="scope">
            <el-button
              type="warning"
              icon="Edit"
              @click="upldateTrait(scope.row)"
            >
              修改
            </el-button>
            <el-popconfirm
              title="你确认要删除吗?"
              @confirm="deleteAttr(scope.row)"
            >
              <template #reference>
                <el-button type="danger" icon="Edit">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--修改弹窗 -->
    <el-dialog
      title="属性界面"
      width="50%"
      v-model="userTraitState.dialogTraitVisible"
    >
      <!-- 表单界面 -->
      <el-form :mode="userTraitState.updateTitTrait">
        <el-form-item label="添加属性">
          <el-input
            v-model="userTraitState.updateTitTrait.attrName"
            placeholder="Please input"
            class="inputWidth"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            @click="addAttar"
            type="primary"
            :disabled="!userTraitState.updateTitTrait.attrName"
          >
            添加属性
          </el-button>
          <el-button>取消</el-button>
        </el-form-item>
        <el-form-item>
          <el-table :data="userTraitState.updateTitTrait.attrValueList">
            <el-table-column
              type="index"
              label="序号"
              width="70px"
              align="center"
            />
            <el-table-column label="属性值名称">
              <template #default="scope">
                <el-input
                  placeholder="输入属性值名称"
                  v-model="scope.row.valueName"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="属性操作" align="center">
              <template #default>
                <el-button type="danger" icon="Delete">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <!-- 底部按钮 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelTrait">取消</el-button>
          <el-button type="primary" @click="save">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
/* 冲仓库获取分类列表 */
import { userGoodsTrait } from '@/store/goods/trait.js'
import { onMounted } from 'vue'
/* 类型约束 */
import { dataTrait } from '@/apis/goods/trait/traitTypes'
/* 获取分类 */
const userTraitState = userGoodsTrait()
onMounted(() => userTraitState.getOneCategoryList())

/* 添加属性 */
const addTrait = () => {
  /*   每一次点击的时候,先清空一下数据再收集数据 */
  Object.assign(userTraitState.updateTitTrait, {
    attrName: '' /* 新增的属性的名字 */,
    attrValueList: [
      /* 新增的属性值数组 */
    ],
    categoryId: userTraitState.threeCategoryId /* 三级分类的ID */,
    categoryLevel: 3, //代表的是三级分类
  })
  userTraitState.dialogTraitVisible = true
}
/* 添加属性 */
const addAttar = () => {
  userTraitState.updateTitTrait.attrValueList.push({
    valueName: '',
  })
}
/* 保存按钮 */
const save = () => {
  userTraitState.addTrait(userTraitState.updateTitTrait)
  /* 保存之后清空收集到的元素 */
  Object.assign(userTraitState.updateTitTrait, {
    attrName: '',
    attrValueList: [],
    categoryId: userTraitState.threeCategoryId,
    categoryLevel: 3,
  })
  userTraitState.dialogTraitVisible = false
}
/* 删除属性 */
const deleteAttr = ({ id }: any) => {
  userTraitState.deleteTrait(id)
}
/* 修该属性 */
const upldateTrait = (row: dataTrait) => {
  userTraitState.dialogTraitVisible = true
  /*  ES6->Object.assign进行对象的合并 */
  Object.assign(userTraitState.updateTitTrait, JSON.parse(JSON.stringify(row)))
}
/* 取消修改 */
const cancelTrait = () => {
  /* 取消之后重置表单元素 */
  userTraitState.dialogTraitVisible = false
}
</script>

<style scoped lang="scss">
.trait {
  .el-card {
    margin: 30px 0;
  }
  .addTraitBox {
    /* 添加属性盒子 */
    width: 100%;
    padding: 10px;
    background: url('@/../public/路飞.png') no-repeat center center;
    background-size: 290px 390px;
  }
  .el-button {
    margin-bottom: 30px;
  }
  .inputWidth {
    width: 300px;
  }
}
</style>
